<template>
  <div class="body">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="步骤 1">
      </el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>
    <div class="registerform">
    <el-form ref="registerFormRef" :model="registerForm" :rules="registerFormRules" label-width="" class="register_form">
      <!--用户名-->
      <el-form-item v-if="this.active === 0" label="用户名" prop="username">
        <el-input v-model="registerForm.username" prefix-icon="el-icon-user-solid">
        </el-input>
      </el-form-item>
      <!--密码-->
      <el-form-item v-if="this.active === 0" label="密码" prop="password">
        <el-input  v-model="registerForm.password" prefix-icon="el-icon-lock" type="password">
        </el-input>
      </el-form-item>
      <el-form-item v-if="this.active === 1" label="邮箱" prop="email">
        <el-input v-model="registerForm.email"></el-input>
      </el-form-item>
      <el-form-item v-if="this.active === 2" label="手机" prop="mobile">
        <el-input v-model="registerForm.mobile"></el-input>
      </el-form-item>
    </el-form>
      </div>
    <button  :disabled="this.active<1" class="btn left"  @click="previous">上一步</button>
    <button v-if="active<3" class="btn" @click="next">下一步</button>
    <button v-else class="btn" @click="finish">完成注册</button>
  </div>
  <!-- 注册表单区域-->
</template>

<script>
export default {
  data() {
    // 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }

      cb(new Error('请输入合法的邮箱'))
    }

    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

      if (regMobile.test(value)) {
        return cb()
      }

      cb(new Error('请输入合法的手机号'))
    }
    return {
      //  激活的下表
      active: 0,
      //  注册表单绑定的数据
      registerForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 添加表单的验证规则对象
      registerFormRules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '用户名的长度在3~10个字符之间',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码的长度在6~15个字符之间',
            trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          { validator: checkMobile, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    //  next下一步的操作
    next() {
      if (this.active <= 2) {
      }
      this.active++
    },
    //  上一个的操作
    previous() {
      if (this.active >= 1) {
        this.active--
      }
    },
    //  完成注册操作
    finish() {
      this.$refs.registerFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('users', this.registerForm)
        if (res.meta.status !== 201) {
          return this.$message.error('添加用户失败！')
        }

        this.$message.success('注册账号成功！')
        await this.$router.push('/shop_login')
      })
    }
  }
}

</script>
<style lang="less" scoped>
  *{
    margin: 0;
    padding: 0;
  }
 .body{
   text-align: center;
   align-items: center;
 }
  .el-steps{
    width: 60%;
    position: absolute;
    left: 16%;
    top: 5%;
  }
  .btn{
    border-radius: 0;
    background-color: rgb(255,0,54);
    color: #ffffff;
    width: 180px;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    position: absolute;
    left: 50%;
    top: 280px;
    text-align: center;
    outline: none;
  }
  .left{
    left: 30%;
    padding-left: 10px;
  }
  .registerform{
    width: 300px;
    position: relative;
    top: 10%;
    left: 35%;
    float: left;
    >.el-form>.el-form-item>.el-input{
      padding: 0 !important;
      margin: 0 !important;
    }
  }
</style>
